<!--
 * @Author: wangshuguang
 * @Date: 2022-06-07 16:17:47
 * @LastEditTime: 2022-07-06 16:12:50
 * @LastEditors: wangshuguang
 * @Description: 插件续费
-->

<template>
  <div class="supAddMerc">
    <HeaderComp :title="`续费${pageTitle}插件`" />
    <div class="plugContent">
      <!-- 基础信息 -->
      <div class="plugIntoItem">
        <div class="title">基础信息</div>
        <ul>
          <li>商家：{{ plugInfo.merName }}</li>
          <li v-if="pluginCode !== 'customerform'">
            名额：{{
              `${plugInfo.usedMerQuota}${
                plugInfo.totalMerQuota ? "/" : ""
              }${plugInfo.totalMerQuota || ""}`
            }}
          </li>
        </ul>
      </div>
      <!-- 费用明细 -->
      <div class="plugIntoItem">
        <div class="title">申请&费用明细</div>
        <div class="mercNum" v-if="pluginCode !== 'customerform'">
          增加合作商家名额
          <div class=" mercNumInput">
            <input
              v-model="mercNum"
              type="number"
              oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
              @change="numChange"
            />
          </div>
          个,
          <span class="mercNumTip" @click="standardVis = true" v-show="payAmt"
            >查看收费标准</span
          >
        </div>
        <ul>
          <li v-if="pluginCode !== 'customerform'">
            新增名额费用合计：{{ calcData.totalAmt || 0 }}元
          </li>
          <li>插件续费费用：{{ plugDetail.openAmt || 0 }}元</li>
          <li>有效期：{{ plugInfo.autoYearPay }}年</li>
        </ul>
        <div class="total">
          合计：<span>{{ payAmt }}元</span>
        </div>
      </div>
      <!-- 支付方式 没有开户金额时 无需展示 -->
      <div class="plugIntoItem payType" v-show="payAmt">
        <div class="title">支付方式</div>
        <div class="textInfo">
          <van-radio-group v-model="payType">
            <van-radio name="ZFB" checked-color="#FFB72F">支付宝支付</van-radio>
            <van-radio
              :disabled="!wallNum || payAmt > wallNum"
              name="WALL"
              checked-color="#FFB72F"
              >钱包余额（剩余￥{{ wallNum }}）</van-radio
            >
          </van-radio-group>
        </div>
      </div>
    </div>
    <!-- 支付按钮 -->
    <div class="btns">
      <!-- <div class="agreement">
        <van-radio-group v-model="agreement">
          <van-radio name="agreement" checked-color="#FFB72F" icon-size="18px">
            同意<span>插件服务协议</span>
          </van-radio>
        </van-radio-group>
      </div> -->
      <div class="submitBtn" @click="submit">
        {{ plugDetail.openAmt ? "开通并支付" : "开通" }}
      </div>
    </div>

    <van-dialog
      className="supAddMercPwdDialog"
      v-model="pwdVisible"
      show-cancel-button
      :before-close="pwdClose"
    >
      <div class="info">
        <div class="closeIcon"></div>
        <div class="title">请输入支付密码</div>
        <div class="payAmount">￥{{ plugDetail.openAmt }}</div>
        <div class="payTypeLabel">
          <span>支付方式</span>
          <span>钱包余额</span>
        </div>
      </div>
      <van-password-input
        :value="pwd"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
    </van-dialog>
    <!-- 数字键盘 -->
    <van-number-keyboard
      z-index="3000"
      v-model="pwd"
      :show="showKeyboard"
      @blur="showKeyboard = false"
    />

    <van-dialog v-model="standardVis" title="合作商户费用标准说明">
      <div class="plugIntoItem standard">
        <ul class="textInfo">
          <li
            v-for="(item, index) of plugDetail.pluginSpecialConfs"
            :key="item.confId + '_' + index"
          >
            <span v-if="item.isAddYear"
              >超过{{ item.merNum }}个合作商户名额，每个名额加收{{
                item.addYearAmt
              }}元</span
            >
            <span v-else>超过{{ item.merNum }}个合作商户名额,不加收费用</span>
          </li>
          <li
            v-show="
              !plugDetail.pluginSpecialConfs ||
                !plugDetail.pluginSpecialConfs.length
            "
          >
            无
          </li>
        </ul>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import {
  qryMerPluginDetail,
  buyPlug,
  qryMerWallBalance,
  qryMerOpenPlugin,
  calAddMerQuotaAmt
} from "@/api/plug";
import { payFormSubmit, dateFtt } from "@/utils/utils";
import { mapGetters } from "vuex";
import { plugTitleObj } from "./plugConfig";

export default {
  data() {
    return {
      dateFtt,
      showKeyboard: false,
      standardVis: false,
      pwdVisible: false,
      pwd: "",
      mercNum: "",
      payType: "ZFB",
      pageTitle: "",
      pluginCode: "supermember",
      plugDetail: {},
      calcData: {},
      plugInfo: {},
      wallNum: 0,
      agreement: true
    };
  },
  mounted() {
    console.log("route supermember", this.$route);
    const { pluginCode } = this.$route.query;
    this.pluginCode = pluginCode;
    this.pageTitle = plugTitleObj[pluginCode] || "";
    this.pageInit();
  },
  computed: {
    payAmt() {
      let amt = this.$math.add(
        this.calcData.totalAmt || 0,
        this.plugDetail.openAmt || 0
      );
      if (amt > this.wallNum) {
        this.payType = "ZFB";
      }
      return amt;
    },
    ...mapGetters(["flowQueryData"])
  },
  methods: {
    async numChange(num) {
      console.log("num", num);
      return calAddMerQuotaAmt({
        addMerNum: this.mercNum || 0,
        pluginCode: this.pluginCode,
        type: 3
      }).then(res => {
        if (res.data.data) {
          this.calcData = res.data.data;
        }
        console.log("res", res);
      });
    },
    async submit() {
      if (!this.agreement) {
        this.$toast("请先同意营销插件协议");
        return;
      } else {
        if (this.pluginCode !== "customerform") {
          await this.numChange(this.mercNum);
        }
        if (this.plugDetail.openAmt) {
          // 需要支付金额
          if (this.payType == "ZFB") {
            // 支付宝支付
            this.zfbPay();
          } else {
            // 余额支付
            this.pwdVisible = true;
          }
        } else {
          // 不需要支付金额  直接调用接口
          this.wallPay();
        }
      }
    },
    zfbPay() {
      // 支付宝支付
      buyPlug({
        routing: "plugPayResult",
        quitRouting: "plugPayResult?payType=ZFBERR",
        addMerAmt: this.calcData.totalAmt,
        addMerNum: this.mercNum,
        openAmt: this.plugDetail.openAmt,
        pluginCode: this.pluginCode,
        payAmt: this.payAmt,
        type: 3,
        payType: "alipay",
        subject: `重启${this.pageTitle}插件`
      }).then(res => {
        console.log("res", res);
        const { aliFrom, payNo } = res.data.data;
        console.log("aliFrom===", aliFrom);
        payFormSubmit(aliFrom);
      });
    },
    pwdClose(type, done) {
      if (type == "confirm") {
        console.log("type,done", type);
        this.wallPay("wallet", done);
      } else {
        this.pwd = "";
        done();
      }
    },
    wallPay(payType, done) {
      // 余额支付
      buyPlug({
        addMerAmt: this.calcData.totalAmt,
        addMerNum: this.mercNum || 0,
        openAmt: this.plugDetail.openAmt,
        pluginCode: this.pluginCode,
        payAmt: this.payAmt,
        payPassword: this.pwd,
        type: 3,
        payType,
        subject: `重启${this.pageTitle}插件`
      }).then(res => {
        console.log("res", res);
        const { code, msg, data } = res.data;
        if (code === 0) {
          if (this.payAmt === 0) {
            return this.$dialog
              .alert({
                title: "提示",
                message: `${plugTitleObj[this.pluginCode]}开通成功`
              })
              .then(res => {
                if (res === "confirm") {
                  this.$router.back();
                  // this.$router.push({
                  //   path: "/plugPayResult",
                  //   query: {
                  //     ...data,
                  //     payType: "WALL"
                  //   }
                  // });
                }
              });
          } else {
            this.$router.push({
              path: "/plugPayResult",
              query: {
                ...data,
                payType: "WALL"
              }
            });
          }
        } else {
          this.$toast(msg);
          if (done) done(false);
        }
        // this.payResult = { ...res.data }
      });
    },
    pageInit() {
      const { merchantId, deptId } = this.flowQueryData;

      qryMerPluginDetail({
        code: this.pluginCode
      }).then(res => {
        this.plugDetail = {
          ...res.data.data
        };
        console.log("plugDetail", this.plugDetail);
      });

      qryMerOpenPlugin({
        code: this.pluginCode
      }).then(res => {
        this.plugInfo = {
          ...res.data.data
        };
        console.log("qryMerOpenPlugin", this.plugInfo);
      });
      // 获取余额
      qryMerWallBalance().then(res => {
        this.wallNum = res.data.data || 0;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.supAddMercPwdDialog {
  top: 30%;
  .info {
    padding: 20px;
    .title {
      font-size: 32px;
      color: #131313;
      text-align: center;
    }
    .payAmount {
      font-size: 60px;
      color: #131313;
      text-align: center;
      margin-bottom: 67px;
    }
    .payTypeLabel {
      display: flex;
      justify-content: space-between;
      color: #131313;
      opacity: 0.7;
      margin-bottom: 60px;
    }
  }
}
.supAddMerc {
  height: 100%;
  .plugIntoItem {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    &.standard {
      padding: 20px;
    }
    &.special {
      .textInfo {
        color: #131313;
        opacity: 0.6;
        font-size: 28px;
        div {
          margin-bottom: 10px;
        }
      }
    }
    &.payType {
      .textInfo {
        color: #131313;
        font-size: 28px;
        font-weight: bold;
        .van-radio {
          margin-bottom: 27px;
        }
      }
    }
    .total {
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 30px;
      span {
        color: #ffbb1c;
      }
    }
    .mercNum {
      font-size: 28px;
      margin-bottom: 20px;
      .mercNumTip {
        color: #ffbb1c;
        text-decoration: underline;
      }
      .mercNumInput {
        display: inline-block;
        border: 2px solid #cacaca;
        padding: 0 10px;
        input {
          display: inline-block;
          width: 100px;
          height: 54px;
          border: none;
        }
      }
    }
    .title {
      color: #131313;
      font-size: 32px;
      font-weight: bold;
      margin-bottom: 30px;
    }
    .textInfo {
      .van-checkbox {
        margin-bottom: 21px;
        font-size: 28px;
        color: #131313;
      }
    }
    ul {
      color: #131313;
      opacity: 0.6;
      font-size: 28px;
      padding-left: 30px;
      li {
        list-style: disc;
        margin-bottom: 20px;
      }
    }
  }
  .plugContent {
    padding: 37px;
  }
  .btns {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    .agreement {
      margin-bottom: 40px;
      font-size: 26px;
      display: flex;
      justify-content: center;
    }
    .submitBtn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 98px;
      color: #fff;
      font-size: 32px;
      background: #ffb72f;
    }
  }
}
</style>
